<template>
  <div class="matrix-catlog-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menu" slot-scope="{ row }">
          <div style="text-align: center">
            <el-button type="text" size="small" @click="goAuthDetail(row)">授权管理</el-button>
          </div>
        </template>
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button type="primary" :size="size" @click="goAuthApprove"> 指标审核设置 </el-button>
        </template>
      </avue-crud>
    </de-container>
  </div>
</template>

<script>
import { requestTargetCatalogPage } from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import { DATA_TYPE_OPTIONS } from './indicator-definition.vue'

export default {
  name: 'MatrixAuth',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestTargetCatalogPage,
      tableOption: {
        menuWidth: 180,
        menuAlign: 'left',
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: false,
        index: true,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '指标编码',
            prop: 'code',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '指标名称',
            prop: 'name',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
          },
          {
            label: '指标分类',
            prop: 'indexType',
            type: 'select',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            dicUrl: '/api/sys/dict/list',
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dicMethod: 'post',
            dicQuery: {
              dictTypeCode: 'martix_type',
            },
          },
          {
            label: '指标定义',
            prop: 'indexDefine',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '责任部门',
            type: 'tree',
            prop: 'company',
            span: 12,
            align: 'center',
            overHidden: true,
            dicUrl: '/api/dept/tree',
            props: {
              label: 'name',
              value: 'deptId',
            },
            dicMethod: 'post',
          },
          {
            label: '责任人',
            type: 'select',
            prop: 'director',
            span: 12,
            align: 'center',
            overHidden: true,

            dicUrl: '/api/user/userGrid/1/999',
            props: {
              label: 'nickName',
              value: 'userId',
            },
            dicMethod: 'post',
            dicFormatter: (res) => res.listObject,
          },
          {
            label: '发布时间',
            prop: 'createdAt',
            span: 24,
            width: 150,
            align: 'center',
          },
        ],
      },
    }
  },
  methods: {
    onError(e) {},
    goAuthDetail(row) {
      this.$router.push(`/redirect/charts/${row.id}/matrix-auth-detail`)
    },
    goAuthApprove() {
      this.$router.push(`/redirect/charts/matrix-auth-approve`)
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-catlog-list {
  .approve-status {
    .clickable {
      cursor: pointer;
      &:hover {
        text-decoration: underline;
        color: var(--primary-color);
      }
    }
  }
}
</style>
